<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${cxt}/css/xw_order.css" />
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<style type="text/css">
	.pointer{
		cursor:pointer;
	}
	.notifyDialog{
		position:absolute;
		top:0px;
		right:0px;
		bottom:0px;
		left:0px;
		background:rgba(0,0,0,0);
		display:none;
		z-index:999;
	}
	.dialog{
		background:#f3fbfe;
		width:350px;
		height:130px;
		margin-top:320px;
		margin-left:500px;
	}
	
	.dialog table tr td{
		width:85px;
	}
	.dialog input{
		width:80px;
		height:30px;
		margin-left:130px;
		margin-top:10px;
		background-color:#2b99ff;
		color:white;
		border:none;
		outline:0;
	}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		$("#close").click(function(){
			$("#dialog").css("display","none");
		});
		
		$("input[name=rname]").blur(function(){
			if($("input[name=rname]").val()==null||$("input[name=rname]").val().length==0){
				$("#errname").text("姓名不能为空");
			}else{
				$("#errname").text("");
			}
			
		});
		
		$("input[name=id]").blur(function(){
			if($("input[name=id]").val()==null||$("input[name=id]").val().length==0){
				$("#errcard").text("证件号码不能为空");
			}else{
				$("#errcard").text("");
			}
			
		});
		
		$("input[name=rtel]").blur(function(){
			if($("input[name=rtel]").val()==null||$("input[name=rtel]").val().length==0){
				$("#errtel").text("手机号码不能为空");
			}else{
				$("#errtel").text("");
			}
			
		});
	});

//接受车型
var order="";
	function pay(){
		if($("input[name=rname]").val()==null||$("input[name=rname]").val().length==0){
			$("#errname").text("姓名不能为空");
		}else if($("input[name=id]").val()==null||$("input[name=id]").val().length==0){
			$("#errcard").text("证件号码不能为空");
		}else if($("input[name=rtel]").val()==null||$("input[name=rtel]").val().length==0){
			$("#errtel").text("手机号码不能为空");
		}else{
			$("input[name=status]").val("等待付款");
			$("input[name=zhifu]").val("支付全款");
			$("#ording").submit();
		}
	
		
	}
	
	function orderf(){
		if($("input[name=rname]").val()==null||$("input[name=rname]").val().length==0){
			$("#errname").text("姓名不能为空");
		}else if($("input[name=id]").val()==null||$("input[name=id]").val().length==0){
			$("#errcard").text("证件号码不能为空");
		}else if($("input[name=rtel]").val()==null||$("input[name=rtel]").val().length==0){
			$("#errtel").text("手机号码不能为空");
		}else{
			$("input[name=status]").val("等待付款");
			$("input[name=zhifu]").val("提交订单");
			$("#ording").submit();
		}
		
	}
	
	function getType(type){
		$("#dialog").css("display","block");
		order=type;
	}
	
	function find(){
		$.ajax({
			type:"get",
			url:"ajaxorderfind",
			data:"order="+order+"",
			success:function(e){
				$("#dialog table").html("");
				$("#dialog table").html(e);
			}
		});
		
	}
</script>
</head>
<body class="f2f3f5">
		
		<div class="orderDetails" style="width:auto;">
			<div class="order-head">
				<div class="order-con">
					<a href="#" target="_blank" class="order-logo"></a>
					<div class="head-r">
						<div class="order-phonebox">
							<span class="phone-icon"></span>
							<div class="phone-shad">
								<img src="${cxt}/img/xw_zc_gaphone.png" />
							</div>
						</div>
						<ul class="head-info">
							<li>
								<a href="#">
									欢迎您
									<i>${utel }</i>
									
								</a>
							</li>
							<li>
								<a href="mycenter">我的订单</a>
							</li>
							<li class="nobrd">
								<a href="#">退出</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="order-proce">
				<div class="order-con">
					<img src="${cxt}/img/xw_order_proce.png" class="order-proce-i">
					<div class="car-info">
						<div class="ifl">
							<img src="${carmodel.carmodelimage }" width="180" height="105"/>
							<div class="lin">
								<p class="lp1">${param.carname }</p>
								<p class="lp2">三厢/1.5自动 | 乘坐${carmodel.seating }人</p>
								<div class="base-btn">
									<a class="look-config pointer" onclick="getType('${param.carname }');find();">查看配置信息</a>
								</div>
							</div>
						</div>
						<ul class="ifr">
							<li class="bdr">
								<p class="le line1">
									<i class="ifr-qc"></i>
									<span>取车</span>
								</p>
								<p class="le line2">
									<i class="ifr-time"></i>
									<span>${param.fromDate } ${param.fromTime }</span>
								</p>
								<p class="le line3">
									<i class="ifr-local"></i>
									<span>${param.fromCity }  ${param.sentAddress }</span>
									
								</p>
							</li>
							<li>
								<p class="le line1">
									<i class="ifr-hc"></i>
									<span>还车</span>
								</p>
								<p class="le line2">
									<i class="ifr-time"></i>
									<span>${param.toDate } ${param.toTime }</span>
								</p>
								<p class="le line3">
									<i class="ifr-local"></i>
									<span>${param.toCity }  ${param.toAddress }</span>
									
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<form action="content/order" method="post" id="ording">
				<input type="hidden" name="fromnum" value="${fromnum }">
				<input type="hidden" name="tonum" value="${tonum }">
				<input type="hidden" name="ucard" value="${ucard }">
				<input type="hidden" name="uname" value="${uname }">
				<input type="hidden" name="num" value="${carmodel.carmodelid }">
				<input type="hidden" name="from" value="${param.fromCity }${param.sentAddress }">
				<input type="hidden" name="to" value="${param.toCity }${param.toAddress }">
				<input type="hidden" name="status">
				<input type="hidden" name="kind" value="自驾租车">
				<input type="hidden" name="qhkind" value="${param.kind }">
				<input type="hidden" name="fromdate" value="${param.fromDate } ${param.fromTime }">
				<input type="hidden" name="todate" value="${param.toDate } ${param.toTime }">
			<div class="order-conf">
				<div class="order-con">
					<div class="info-msg">
						<p>
							下单成功后，提醒信息会发送至手机
							<i>${utel }</i>
							 <a href="#">[修改]</a>
						</p>
					</div>
					<div>
						<h3>
							租车人信息
							<span class="ifred">请认真填写一下信息，取车时需要现场核对！</span>
						</h3>
						<ul class="h3h infoul">
							<li>
								<label>
									<i>*</i>
									姓  名
								</label>
								<input name="rname" type="text" placeholder="请输入您的姓名" maxlength="50" style="border: 1px solid rgb(228, 230, 233); color: rgb(200, 200, 206);" value="${uname }"/>
								<span id="errname" style="color:red;margin-left:5px;"></span>
							</li>
							<li>
								<label>
									<i>*</i>
									证件类型
								</label>
								<input  type="text" value="身份证" readonly="readonly" style="color: rgb(47, 47, 57); border: 1px solid rgb(228, 230, 233);" />
								
							</li>
							<li>
								<label>
									<i>*</i>
									证件号码
								</label>
								<input name="id" type="text" placeholder="请输入证件号码" maxlength="20" style="border: 1px solid rgb(228, 230, 233); color: rgb(200, 200, 206);" value="${ucard }" />
								<span id="errcard" style="color:red;margin-left:5px;"></span>
							</li>
							<li>
								<label>
									<i>*</i>
									手机号码
								</label>
								<input name="rtel" type="text" placeholder="请输入手机号码" maxlength="20" style="border: 1px solid rgb(228, 230, 233); color: rgb(200, 200, 206);" value="${utel }" />
								<span id="errtel" style="color:red;margin-left:5px;"></span>
							</li>
							<li>
								<label>
									<i class="none">*</i>
									邮  箱
								</label>
								<input name="email" type="text" placeholder="请输入邮箱" maxlength="50" style="border: 1px solid rgb(228, 230, 233); color: rgb(200, 200, 206);" value="${uemail }"/>
								<div class="order-youhui">
									<i class="blue-yes"></i>
									<input type="checkbox" class="emailFlag" checked="checked" style="border: 1px solid rgb(228, 230, 233);" />
									希望接收租车优惠信息
								</div>
							</li>
						</ul>
					</div>
					<div class="papers-tip">
						<p>取车时,出示以下证件的原件：本人二代身份证、本人国内有效驾驶证正副本、本人一张信用及可用额度均不低于3000元的国内有效信用卡，所有证件有效期须至少超过当次租期的两个月以上。</p>
					</div>
					<div>
						<h3>费用明细</h3>
						<ul class="h3h feeul">
							<li>
								<span class="fee-txt">车辆租赁及门店服务费</span>
								<span class="fee-res">
									<i>¥</i>
									${carmodel.rentcash*timec }
								</span>
								<span class="fee-pro">${carmodel.rentcash*timec }x${day }</span>
								<input type="hidden" name="rentcash" value="${carmodel.rentcash*timec*day }">
								<div class="clear"></div>
							</li>
							<li style="position:relative;z-index:10;">
								<span class="fee-txt">
									基本保险费
								</span>
								<span class="fee-res">
									<i>¥</i>
									${carmodel.insurance }
								</span>
								<span class="fee-pro">${carmodel.insurance }x${day }</span>
								<input type="hidden" name="insurance" value="${carmodel.insurance*day }">
								<div class="clear"></div>
							</li>
							<li style="position:relative;z-index:10;">
								<span class="fee-txt">
									押金
								</span>
								<span class="fee-res">
									<i>¥</i>
									${carmodel.pledge}
								</span>
								<span class="fee-pro">${carmodel.pledge}</span>
								<input type="hidden" name="pledge" value="${carmodel.pledge}">
								<div class="clear"></div>
							</li>
							<c:if test="${servicemoney!=0.0 }">
							<li style="position:relative;z-index:10;">
								<span class="fee-txt">
									异店还车手续费
								</span>
								<span class="fee-res">
									<i>¥</i>
									${servicemoney}
								</span>
								<span class="fee-pro">${servicemoney}</span>
								<input type="hidden" name="service" value="${servicemoney}">
								<div class="clear"></div>
							</li>
							</c:if>
							
						</ul>
					</div>
					<div class="gopay">
						<div class="paydetail">
							<span class="ddzj">订单总价</span>
							<span class="ddall">
									<i>¥</i>
									<i class="all" >${(carmodel.rentcash*timec+carmodel.insurance)*day+carmodel.pledge+servicemoney}</i>
									<input type="hidden" name="money" value="${(carmodel.rentcash*timec+carmodel.insurance)*day+carmodel.pledge+servicemoney}"/>
							</span>
						</div>
						<input type="button"  class="gopay-red pointer" onclick="pay()" value="支付全款" style="outline:0;border:none;">
						<input type="hidden" name="zhifu">
						<input type="button" class="gopay-blue pointer"  value="提交订单" style="outline:0;border:none;margin-right:5px;" onclick="orderf()">
					</div>
				</div>
			</div>
			</form>
			<div class="order-tggz">
				<div class="order-con">
					<div class="top">退改规则</div>
					<dl>
						<dt>1.订单取消</dt>
						<dd>距取车时间4小时内取消，不支持退预付款；距取车时间4小时以上取消，可全额退还预付款。</dd>
						<dt>2.订单修改</dt>
						<dd>
							<br />
							a)取车时间距当前时间≥4个工作小时，如需修改订单，请在预计取车时间前4个工作小时以上致电400 616 6666。若神州租车车辆可以满足更改订单的需求，可以为您修改订单，否则不予修改。
							<br />
							b)取车时间距当前时间＜4个工作小时，不接受修改。
						</dd>
						<dd>（小贴士：如果您修改订单或取消订单重新预订，价格可能会发生变化。）</dd>
						<dd>3.提前还车：允许提前还车，但已预付的租金不退。</dd>
					</dl>
				</div>
			</div>
		</div>
		<div class="order_footer">
			<p>
				<a href="#">关于我们</a>    
					| 
				<a href="#" target="_blank">投资者关系</a>  
					| 			  
				<a href="#" target="_parent">新闻中心</a>    
					| 
				<a href="#" target="_blank">加盟合作</a>    
					| 
				<a href="#" target="_parent">隐私保护</a>    
					| 
				<a href="#" target="_parent">网站导航</a>    
					| 
				<a href="#" target="_parent">联系我们</a>    
					| 
				<a href="#" target="_blank">招贤纳士</a>    
			</p>
			<p>
				<a target="_blank" href="#" class="sz_k"></a>
				<a target="_blank" href="#" class="sz_c"></a>
			</p>
			<p>Copyright©2008-2017 www.zuche.com All Rights Reserved. </p>
			<p>如果您对神州租车网站有任何意见,欢迎发送邮件到 1456073180@qq.com</p>
			<p>北京神州汽车租赁有限公司 京ICP备10005002号   |   京公网安备号 11010502026705</p>
		</div>
		
		
		<div class="notifyDialog" id="dialog">
			<div class="dialog" >
			<table cellpadding="0" cellspacing="0" border="1">
				
			</table>
			<input type="button" value="关闭" id="close" class="pointer">
			</div>
		</div>
	</body>
</html>